<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="vueContainer">
</div>
<template id="content">
    <div style="position:absolute; top: 0">
        <p>
            <button @click="flyToSpace" style="padding:8px 12px;">坐标视点跳转</button>
            <button @click="() => flyToSpace(0)" style="padding:8px 12px;">跳转默认主视点</button>
            <button @click="modeOutline" style="padding:8px 12px;">模型描边</button>
        </p>
        <p>
            <button @click="getCameraCoordinates" style="padding:8px 12px;">获取相机在世界坐标中的位置</button>
            <button @click="setCameraCoordinates" style="padding:8px 12px;">设置相机在世界坐标中的位置
            </button>
            <button @click="saveCurrentViewAsImages" style="padding:8px 12px;">保存当前视点照片</button>
            <button @click="clearCurrentViewAsImages" style="padding:8px 12px;">清空当前视点照片</button>
        </p>
        <p>
            <button @click="getCoordinate" style="padding:8px 12px;">鼠标坐标获取</button>
            <button @click="getStraightLines" style="padding:8px 12px;">直线测量(椭球体)</button>
            <button @click="measureMent" style="padding:8px 12px;">直线测量（点）</button>
            <button @click="areaMeasurement" style="padding:8px 12px;">面积测量</button>
            <button @click="volumeMeasurement" style="padding:8px 12px;">体积测量</button>
            <!--            <button @click="drawLine" style="padding:8px 12px;">绘制直线</button>-->
        </p>
        <p>
            <button @click="removeAllLine" style="padding:8px 12px;">清空折线</button>
            <button @click="removeAllEllisoid" style="padding:8px 12px;">清空椭球体</button>
            <button @click="removeAllPoint" style="padding:8px 12px;">清空点</button>

        </p>
        <p>
            <button @click="mouseMove" style="padding:8px 12px;">鼠标移动事件</button>
            <button @click="mouseMoveModal" style="padding:8px 12px;">鼠标移动实体</button>
            <button @click="registDeviceInfoCallback" style="padding:8px 12px;">测试</button>
            <button @click="sampleHeights" style="padding:8px 12px;">创建多折线</button>
        </p>
        <div v-show="imgSrc"
             style="position: absolute;width: 500px;height: 300px;background-color: black;border: 2px red solid">
            <img :src="imgSrc" alt="" style="width: 100%;height: 100%;">
        </div>

    </div>
</template>
<script src="../../config/index.js"></script>
<script src="variable.js"></script>
<script src="ac-min.js"></script>
<script>
  const { createApp, ref, onMounted, onBeforeUnmount } = Vue
  const app = createApp({
    template: `#content`,
    setup() {
      const message = ref('Hello Vue.js!')
      const imgSrc = ref('')
      const outLine = ref(false)
      let savedViewpoint
      let func1 //存储父组件传过来的函数
      /**
       * 跳转视点
       * @param num 类别 0主视点 1其他视点
       */
      const flyToSpace = (num) => {
        // flyToPoint(num, [116.39398740684796, 39.91490288752101])//目标
        flyToPoint(num, [116.39384613412295, 39.91640637693138
        ])//目标
          // flyToPoint(num, [116.39088519951802, 39.91576043471435])//目标
          // flyToPoint(num, [116.39360555619589, 39.906505447138726]) //实际 400
          // flyToPoint(num, [116.39378055619589, 39.913555447138726]) //实际 100
      }
      const testModal = () => {
        console.log(9898989)

      }
      window._testModal = testModal
      const registDeviceInfoCallback = (func = () => {}) => {
        console.log(func, '222')
        console.log(func1, '222')
        if(func) {
          if(typeof func1 !== 'function') {
            func1 = func
          }
        }
        const res = func1(1)
        console.log(res)
      }
      window._registDeviceInfoCallback = registDeviceInfoCallback

      /**
       * 模型描边
       */
      const modeOutline = () => {
        outLine.value = !outLine.value
        console.log(outLine.value)
        modeOutlineToggle(outLine.value, [0, 1, 1, 1])
      }
      window._modeOutline = modeOutline

      /**
       * 获取鼠标点击坐标
       */
      const getCoordinate = () => {
        // 获取的是屏幕二维坐标（移动）
        // const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        // handler.setInputAction(function(movement) {
        //   console.log(movement, '---movement--') // 起始坐标点，一般使用结束坐标点
        //   const position = movement.endPosition // 鼠标当前位置的屏幕坐标
        //   console.log('position', position)
        // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        // 获取的是屏幕二维坐标（左击）
        // const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        // handler.setInputAction(function(movement) {
        //   console.log(movement, '---movement--')
        //   const position = movement.position // 鼠标当前位置的屏幕坐标
        //   console.log('position', position)
        // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        // viewer.scene.globe.depthTestAgainstTerrain = true
        //获取鼠标点击位置的地理坐标（经度、纬度、高度）：
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        handler.setInputAction(function(movement) {
          const scene = viewer.scene
          if(scene.mode !== Cesium.SceneMode.MORPHING) {
            const pickedObject = scene.pick(movement.position)
            if(scene.pickPositionSupported && Cesium.defined(pickedObject)) {
              const cartesian = viewer.scene.pickPosition(
                movement.position
              )

              if(Cesium.defined(cartesian)) {
                const cartographic = Cesium.Cartographic.fromCartesian(
                  cartesian
                )
                const longitudeString = Cesium.Math.toDegrees(
                  cartographic.longitude
                ).toFixed(2)
                const latitudeString = Cesium.Math.toDegrees(
                  cartographic.latitude
                ).toFixed(2)
                const heightString = cartographic.height.toFixed(2)
                console.log('Lon:', longitudeString, 'Lat:', latitudeString, 'Alt:', heightString)

                // console.log('cartesian', cartesian)
                // // viewer.scene.pickPosition()用于获取鼠标点击位置的地形高度
                // const pickedTerrain = viewer.scene.pickPosition(movement.position)
                // console.log('pickedTerrain', pickedTerrain)
                // if(cartesian) {
                //   const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
                //   console.log('cartographic', cartographic) //单位是弧度
                //   const longitude = Cesium.Math.toDegrees(cartographic.longitude) //(单位是度)
                //   const latitude = Cesium.Math.toDegrees(cartographic.latitude)//(单位是度)
                //   const height = cartographic.height
                //   console.log('longitude', longitude)
                //   console.log('latitude', latitude)
                //   console.log('height', height)
                // 使用获取到的经度、纬度、高度坐标进行其他操作
                // }
              }
            }
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        // 获取鼠标点击位置的相对于地形表面的高度：
        // const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        // handler.setInputAction(function(movement) {
        //   // viewer.scene.pickPosition(movement.position)方法通过传入鼠标点击位置（movement.position）获取到了一个Cartesian3对象，
        //   // 表示点击位置的三维笛卡尔坐标。这个三维坐标是基于空间直角坐标系的。
        //   const pickedTerrain = viewer.scene.pickPosition(movement.position)
        //   console.log('pickedTerrain', pickedTerrain) // x,y,z 空间直角坐标系
        //   if(Cesium.defined(pickedTerrain)) {
        //     const cartographic = Cesium.Cartographic.fromCartesian(pickedTerrain)
        //     console.log('cartographic', cartographic) //单位是弧度
        //     const height = cartographic.height
        //     console.log('height', height)
        //     // 使用获取到的高度进行其他操作
        //   }
        // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      let polyline
      const measureMent = () => {
        // measureTool('LINEAR')
        measureTool('')
      }
      const getStraightLines = () => {
        let arr = []
        let tes = []
        let arr2 = []
        // 创建测量工具
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        handler.setInputAction(function(movement) {
          // viewer.scene.pickPosition(movement.position)方法通过传入鼠标点击位置（movement.position）获取到了一个Cartesian3对象，
          // 表示点击位置的三维笛卡尔坐标。这个三维坐标是基于空间直角坐标系的。
          const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid)
          viewer.entities.add({
            position: cartesian,
            ellipsoid: {
              radii: new Cesium.Cartesian3(0.5, 0.5, 0.5),
              material: Cesium.Color.ORANGE
            }
          })
          const pickedTerrain = viewer.scene.pickPosition(movement.position)
          arr.push(pickedTerrain)
          tes.push(cartesian)
          console.log('pickedTerrain', pickedTerrain) // x,y,z 空间直角坐标系
          // 以下两个等价
          // console.log('Cesium.Cartographic.fromRadians (2.031474340028202, 0.6966780168663999, 0 ) ', Cesium.Cartographic.fromRadians(2.031474340028202, 0.6966780168663999, 0)) // x,y,z 空间直角坐标系
          // console.log('Cesium.Cartographic.fromRadians (2.031474340028202, 0.6966780168663999, 0 ) ', new Cesium.Cartographic(2.031474340028202, 0.6966780168663999, 0)) // x,y,z 空间直角坐标系
          const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
          console.log('cartographic', cartographic) //单位是弧度
          const longitude = Cesium.Math.toDegrees(cartographic.longitude) //(单位是度)
          const latitude = Cesium.Math.toDegrees(cartographic.latitude)//(单位是度)
          arr2.push(longitude)
          arr2.push(latitude)
          if(arr.length === 2) {
            const res = getStraightLine(arr[0], arr[1])
            const res1 = getStraightLine(tes[0], tes[1])
            console.log('长度是', res)
            console.log('长度是1111111', res1)
            // 删除折线
            // removeLine(polyline)
            polyline = drawLine(arr2)
            arr = []
            arr2 = []
          }

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        handler.setInputAction(function(movement) {
          // viewer.scene.pickPosition(movement.position)方法通过传入鼠标点击位置（movement.position）获取到了一个Cartesian3对象，
          // 表示点击位置的三维笛卡尔坐标。这个三维坐标是基于空间直角坐标系的。
          // console.log(movement, '---movement--') // 起始坐标点，一般使用结束坐标点
          // 获取鼠标当前位置的屏幕坐标
          if(arr.length === 1) {
            const screenPosition = new Cesium.Cartesian2(movement.startPosition.x, movement.startPosition.y)
            // 将屏幕坐标转换为笛卡尔3坐标
            const cartesian3 = viewer.camera.pickEllipsoid(screenPosition, viewer.scene.globe.ellipsoid)
            console.log('cartesian3', cartesian3)
            // 将屏幕坐标转换为地理坐标
            const ray = viewer.camera.getPickRay(screenPosition)
            console.log(ray, '---')
            const cartesian = viewer.scene.globe.pick(ray, viewer.scene)
            const cartographic = Cesium.Cartographic.fromCartesian(cartesian)

            // 获取经纬度坐标
            const longitude = Cesium.Math.toDegrees(cartographic.longitude)
            const latitude = Cesium.Math.toDegrees(cartographic.latitude)

            // 输出金纬度坐标
            console.log('经度: ' + longitude + ', 纬度: ' + latitude)
            let arr3 = [...arr2]
            let arr4 = [...arr]
            arr3.push(longitude)
            arr3.push(latitude)
            arr4.push(cartesian3)
            getStraightLine(arr4[0], arr4[1])
            // 删除折线
            removeLine(polyline)
            polyline = drawLine(arr3)

          }

        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

      }
      const removeAllLine = () => {
        removeLineAll()
      }
      const removeAllEllisoid = () => {
        removeEllipsoidAll()
      }
      const removeAllPoint = () => {
        removePointAll()
      }
      // const drawLine = (position) => {
      //   console.log(position, 'position')
      //   //a,c分别为画点时，设置的点的id，可以找到这个点并获取这两个点的经纬度
      //   if(polyline) {
      //     viewer.entities.remove(polyline)
      //   }
      //   polyline = viewer.entities.add({
      //     id: 'ccc',
      //     name: '折线',
      //     polyline: {
      //       show: true,
      //       positions: Cesium.Cartesian3.fromDegreesArray(position),// position格式为[x,y,x1,y1]
      //       width: 2,
      //       material: Cesium.Color.RED
      //     }
      //   })
      //   console.log('polyline', polyline._id)
      //
      // }
      /**
       * 获取相机在世界坐标中的位置
       */
      const getCameraCoordinates = () => {
        const res = getCameraCoordinate()
        console.log(res)
        savedViewpoint = res.data.get('camera')
        console.log('222', res.data)
      }
      /**
       * 设置相机在世界坐标中的位置
       */
      const setCameraCoordinates = () => {
        setCameraCoordinate(savedViewpoint)
      }

      // 捕捉当前视图并保存为图片
      const saveCurrentViewAsImages = () => {
        const res = saveCurrentViewAsImage(false)
        imgSrc.value = res.data.get('imgUrl')
        console.log(res)
      }
      // 清空当前视点
      const clearCurrentViewAsImages = () => {
        imgSrc.value = ''
      }
      let entity

      /**
       * 鼠标移动事件
       */
      const mouseMove = () => {
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        handler.setInputAction(function(movement) {
          // viewer.scene.pickPosition(movement.position)方法通过传入鼠标点击位置（movement.position）获取到了一个Cartesian3对象，
          // 表示点击位置的三维笛卡尔坐标。这个三维坐标是基于空间直角坐标系的。
          // console.log(movement, '---movement--') // 起始坐标点，一般使用结束坐标点
          // 获取鼠标当前位置的屏幕坐标
          const screenPosition = new Cesium.Cartesian2(movement.startPosition.x, movement.startPosition.y)
          // 将屏幕坐标转换为笛卡尔3坐标
          const cartesian3 = viewer.camera.pickEllipsoid(screenPosition, viewer.scene.globe.ellipsoid)
          // console.log(cartesian3, '--')
          // 将屏幕坐标转换为地理坐标
          const ray = viewer.camera.getPickRay(screenPosition)
          // console.log(ray, '---')
          const cartesian = viewer.scene.globe.pick(ray, viewer.scene)
          const cartographic = Cesium.Cartographic.fromCartesian(cartesian)

          // 获取经纬度坐标
          const longitude = Cesium.Math.toDegrees(cartographic.longitude)
          const latitude = Cesium.Math.toDegrees(cartographic.latitude)
          // 输出金纬度坐标
          // console.log('经度: ' + longitude + ', 纬度: ' + latitude)
          // 定义正方形实体的位置和尺寸
          const position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
          // const dimensions = new Cesium.Cartesian3(10, 10, 10) // x, y, z方向的尺寸
          //
          // // 创建盒子几何体
          // const boxGeometry = new Cesium.BoxGeometry({
          //   dimensions: dimensions
          // })
          // 使用盒子几何体创建盒子实体
          // const boxEntity = viewer.entities.add({
          //   position: position,
          //   box: {
          //     dimensions: dimensions,
          //     material: Cesium.Color.RED.withAlpha(0.5) // 设置盒子实体的颜色和透明度
          //   }
          // })

          // 将相机视角调整到盒子实体所在位置
          // viewer.zoomTo(boxEntity)

          //  -------------------------
          // 定义正方形的位置和尺寸
          if(entity) {
            viewer.entities.remove(entity)
          }
          // entity = viewer.entities.add({
          //   position: position,
          //   plane: {
          //     plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
          //     dimensions: new Cesium.Cartesian2(1, 1),
          //     material: Cesium.Color.RED.withAlpha(0.5),
          //     outLine: true,
          //     outlineColor: Cesium.Color.BLACK
          //   }
          // })
          entity = viewer.entities.add({
            position: position,
            point: {
              show: true,
              pixelSize: 20,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              color: Cesium.Color.YELLOW.withAlpha(0.5),
              // outlineColor: Cesium.Color.YELLOW,
              outlineWidth: 0,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
            }
          })
          // 将相机视角调整到矩形所在位置
          // viewer.zoomTo(rectangle)
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        handler.setInputAction(() => {
          console.log('我出去啦')
        }, Cesium.ScreenSpaceEventType.MOUSE_OUT)
      }

      const mouseMoveModal = () => {
        const position = Cesium.Cartesian3.fromDegrees(116.39406298031811, 39.916781347359354)
        const position1 = Cesium.Cartesian3.fromDegrees(116.39406598031811, 39.916781347359354)
        let pointOption = {
          show: true,
          pixelSize: 20,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
        }
        let entity = new Cesium.Entity({
          name: 'test',
          show: true,
          position: position,
          point: pointOption
        })
        let entity1 = new Cesium.Entity({
          name: 'tes1',
          show: true,
          position: position1,
          point: pointOption
        })
        let entity11 = new Cesium.Entity({
          name: 'tes2',
          show: true,
          position: Cesium.Cartesian3.fromDegrees(116.39406598031811, 39.919781347359354),
          plane: {
            plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
            dimensions: new Cesium.Cartesian2(20, 20),
            material: Cesium.Color.RED.withAlpha(0.5),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            outLine: true,
            outlineColor: Cesium.Color.BLACK,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
          }
        })
        let polyline = viewer.entities.add({
          // id: 'ccc',
          name: '折线',
          polyline: {
            show: true,
            positions: Cesium.Cartesian3.fromDegreesArray([116.39377552981092, 39.917114291563685, 116.39403867807344, 39.916898728658666]),// position格式为[x,y,x1,y1]
            width: 2,
            material: Cesium.Color.RED
          }
        })
        viewer.entities.add(entity)
        viewer.entities.add(entity1)
        viewer.entities.add(entity11)
        let modelDragHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
        modelDragHandler.setInputAction((movement) => {
          // 为viewer绑定MOUSE_DOWN事件监听器（执行函数，监听的事件）
          const pickInfo = viewer.scene.pick(movement.position)
          console.log(pickInfo)
          if(!pickInfo) {
            return
          }
          let middleCoordinate
          // 如果点击空白区域，则不往下执行
          viewer.scene.screenSpaceCameraController.enableRotate = false // 将相机锁定，不然后续移动实体时相机也会动
          modelDragHandler.setInputAction((arg) => { // 为viewer绑定MOUSE_MOVE事件监听器（执行函数，监听的事件）
            console.log('移动')
            const position = arg.endPosition // arg有startPosition与endPosition两个属性，即移动前后的位置信息：Cartesian2对象
            const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene) //将Cartesian2转为Cartesian3
            const selectedEntity = viewer.selectedEntity // 实体
            if(!selectedEntity) {
              return false
            }
            console.log('selectedEntity', selectedEntity)
            //注意需要赋值三维坐标

            if(selectedEntity.name === '折线') {
              console.log('selectedEntity.polyline.positions----------------', selectedEntity.polyline.positions)
              console.log('selectedEntity.polyline.positions', selectedEntity.polyline.positions._value)
              console.log('selectedEntity.polyline.positions3333333333', selectedEntity.polyline.positions._value[0])
              if(!middleCoordinate) {
                const res = calculateMidpoint(selectedEntity.polyline.positions._value[0], selectedEntity.polyline.positions._value[1])
                console.log(res)
                middleCoordinate = res.data.get('half')
                console.log(middleCoordinate, '----------')
              }
              const resR = polylineCoordinate(cartesian, middleCoordinate)
              console.log(resR, '-**************')
              console.log(resR.data.get('point1'), '-******1********')
              console.log(resR.data.get('point2'), '-*******2*******')
              // selectedEntity.polyline.positions._value[0] = resR.data.get('point1')
              // selectedEntity.polyline.positions._value[1] = resR.data.get('point2')
              // selectedEntity.polyline.positions = Cesium.Cartesian3.fromDegreesArray([116.367377552981092, 39.917124291563685, 116.39403867807344, 39.916898728658666])// position格式为[x,y,x1,y1]
              selectedEntity.polyline.positions = [resR.data.get('point1'), resR.data.get('point2')]
            } else {
              selectedEntity.position = cartesian
              // 更新实体位置为当前鼠标位置
            }

          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

          modelDragHandler.setInputAction(() => { //为viewer绑定LEFT_UP事件监听器（执行函数，监听的事件）
            modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE) // 解除viewer的MOUSE_MOVE事件监听器
            modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP) // 解除viewer的LEFT_UP事件监听器
            viewer.scene.screenSpaceCameraController.enableRotate = true // 取消相机锁定
            console.log('抬起')
          }, Cesium.ScreenSpaceEventType.LEFT_UP)

        }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
      }
      const sunModal = (func) => {
        console.log('testModal', window.parent)
        // if(typeof func === 'function') {
        const res = func()
        // func1 = func
        console.log(res, '--------------res')
        // }
        // window.parent.testModal()
      }
      window.sunModal = sunModal

      const sampleHeights = async() => {
        viewer.entities.removeAll()

        const cartesian1 = new Cesium.Cartesian3(
          1216373.9595865572,
          -4736247.487433615,
          4081270.3278219798
        )
        const cartesian2 = new Cesium.Cartesian3(
          1216303.9029310115,
          -4736208.948739674,
          4081335.4904269837
        )

        // 30 个 点
        const count = 30
        let cartesians = new Array(count) //初始化一个长度为 30 的空数组
        for(let i = 0; i < count; ++i) {
          // 循环赋值
          const offset = i / (count - 1) //偏移量
          cartesians[i] = Cesium.Cartesian3.lerp( //线性插值
            cartesian1,
            cartesian2,
            offset,
            new Cesium.Cartesian3()
          )
          console.log(cartesians[i], '----11111')
          console.log(i, '----i')
          console.log(cartesians, 'cartesians')

        }
        console.log(cartesians, 'cartesians')
        let clampedCartesians = [
          {
            'x': 1216391.01548873,
            'y': -4736314.628219622,
            'z': 4081341.8172131134
          },
          {
            'x': 1216389.1007303281,
            'y': -4736313.957655839,
            'z': 4081344.7897171536
          },
          {
            'x': 1216386.4560876929,
            'y': -4736310.445104217,
            'z': 4081345.296736885
          },
          {
            'x': 1216384.9393639616,
            'y': -4736311.3243925525,
            'z': 4081349.613772392
          },
          {
            'x': 1216382.224909939,
            'y': -4736307.540006362,
            'z': 4081349.884966552
          },
          {
            'x': 1216380.1759319887,
            'y': -4736306.3468252495,
            'z': 4081352.404089178
          },
          {
            'x': 1216375.721981009,
            'y': -4736295.789216316,
            'z': 4081346.799341632
          },
          {
            'x': 1216372.7093509752,
            'y': -4736290.843771733,
            'z': 4081346.0632747174
          },
          {
            'x': 1216370.6697992343,
            'y': -4736289.687277915,
            'z': 4081348.6142159146
          },
          {
            'x': 1216368.3610102609,
            'y': -4736287.482430772,
            'z': 4081350.2556830253
          },
          {
            'x': 1216366.2263622775,
            'y': -4736285.955651602,
            'z': 4081352.4853916625
          },
          {
            'x': 1216364.2198199087,
            'y': -4736284.9276905535,
            'z': 4081355.1478390424
          },
          {
            'x': 1216363.3712468045,
            'y': -4736288.408643606,
            'z': 4081361.7219009562
          },
          {
            'x': 1216361.9899782788,
            'y': -4736289.815392892,
            'z': 4081366.4965368053
          },
          {
            'x': 1216357.8649566805,
            'y': -4736280.538465433,
            'z': 4081362.002761215
          },
          {
            'x': 1216355.8753101465,
            'y': -4736279.576297101,
            'z': 4081364.722287549
          },
          {
            'x': 1216353.6223976447,
            'y': -4736277.589016584,
            'z': 4081366.5524969962
          },
          {
            'x': 1216351.5374657086,
            'y': -4736276.255823773,
            'z': 4081368.950148201
          },
          {
            'x': 1216349.3593594562,
            'y': -4736274.559825124,
            'z': 4081371.0330533865
          },
          {
            'x': 1216347.1598470786,
            'y': -4736272.780473609,
            'z': 4081373.04364677
          },
          {
            'x': 1216345.0525381172,
            'y': -4736271.360147967,
            'z': 4081375.365707225
          },
          {
            'x': 1216342.9597615995,
            'y': -4736269.996409794,
            'z': 4081377.7368594166
          },
          {
            'x': 1216341.0215715014,
            'y': -4736269.234610776,
            'z': 4081380.630216006
          },
          {
            'x': 1216339.6991288012,
            'y': -4736270.870455243,
            'z': 4081385.603618862
          },
          {
            'x': 1216339.8504754268,
            'y': -4736278.245063558,
            'z': 4081395.5556225204
          },
          {
            'x': 1216337.7085557852,
            'y': -4736276.689986769,
            'z': 4081397.76079101
          },
          {
            'x': 1216335.6036307227,
            'y': -4736275.27896252,
            'z': 4081400.09093066
          },
          {
            'x': 1216333.441262407,
            'y': -4736273.644260507,
            'z': 4081402.2270209235
          },
          {
            'x': 1216331.8753504548,
            'y': -4736274.3320992915,
            'z': 4081406.378010512
          },
          {
            'x': 1216329.5416127034,
            'y': -4736272.0301033445,
            'z': 4081407.935196639
          }
        ]
        // 转换为地形夹紧位置
        // viewer.scene.clampToHeightMostDetailed(
        //   cartesians
        // ).then((res) => {
        //   console.log(res, '-----res-----')
        //   clampedCartesians = [
        //     {
        //       'x': 1216391.01548873,
        //       'y': -4736314.628219622,
        //       'z': 4081341.8172131134
        //     },
        //     {
        //       'x': 1216389.1007303281,
        //       'y': -4736313.957655839,
        //       'z': 4081344.7897171536
        //     },
        //     {
        //       'x': 1216386.4560876929,
        //       'y': -4736310.445104217,
        //       'z': 4081345.296736885
        //     },
        //     {
        //       'x': 1216384.9393639616,
        //       'y': -4736311.3243925525,
        //       'z': 4081349.613772392
        //     },
        //     {
        //       'x': 1216382.224909939,
        //       'y': -4736307.540006362,
        //       'z': 4081349.884966552
        //     },
        //     {
        //       'x': 1216380.1759319887,
        //       'y': -4736306.3468252495,
        //       'z': 4081352.404089178
        //     },
        //     {
        //       'x': 1216375.721981009,
        //       'y': -4736295.789216316,
        //       'z': 4081346.799341632
        //     },
        //     {
        //       'x': 1216372.7093509752,
        //       'y': -4736290.843771733,
        //       'z': 4081346.0632747174
        //     },
        //     {
        //       'x': 1216370.6697992343,
        //       'y': -4736289.687277915,
        //       'z': 4081348.6142159146
        //     },
        //     {
        //       'x': 1216368.3610102609,
        //       'y': -4736287.482430772,
        //       'z': 4081350.2556830253
        //     },
        //     {
        //       'x': 1216366.2263622775,
        //       'y': -4736285.955651602,
        //       'z': 4081352.4853916625
        //     },
        //     {
        //       'x': 1216364.2198199087,
        //       'y': -4736284.9276905535,
        //       'z': 4081355.1478390424
        //     },
        //     {
        //       'x': 1216363.3712468045,
        //       'y': -4736288.408643606,
        //       'z': 4081361.7219009562
        //     },
        //     {
        //       'x': 1216361.9899782788,
        //       'y': -4736289.815392892,
        //       'z': 4081366.4965368053
        //     },
        //     {
        //       'x': 1216357.8649566805,
        //       'y': -4736280.538465433,
        //       'z': 4081362.002761215
        //     },
        //     {
        //       'x': 1216355.8753101465,
        //       'y': -4736279.576297101,
        //       'z': 4081364.722287549
        //     },
        //     {
        //       'x': 1216353.6223976447,
        //       'y': -4736277.589016584,
        //       'z': 4081366.5524969962
        //     },
        //     {
        //       'x': 1216351.5374657086,
        //       'y': -4736276.255823773,
        //       'z': 4081368.950148201
        //     },
        //     {
        //       'x': 1216349.3593594562,
        //       'y': -4736274.559825124,
        //       'z': 4081371.0330533865
        //     },
        //     {
        //       'x': 1216347.1598470786,
        //       'y': -4736272.780473609,
        //       'z': 4081373.04364677
        //     },
        //     {
        //       'x': 1216345.0525381172,
        //       'y': -4736271.360147967,
        //       'z': 4081375.365707225
        //     },
        //     {
        //       'x': 1216342.9597615995,
        //       'y': -4736269.996409794,
        //       'z': 4081377.7368594166
        //     },
        //     {
        //       'x': 1216341.0215715014,
        //       'y': -4736269.234610776,
        //       'z': 4081380.630216006
        //     },
        //     {
        //       'x': 1216339.6991288012,
        //       'y': -4736270.870455243,
        //       'z': 4081385.603618862
        //     },
        //     {
        //       'x': 1216339.8504754268,
        //       'y': -4736278.245063558,
        //       'z': 4081395.5556225204
        //     },
        //     {
        //       'x': 1216337.7085557852,
        //       'y': -4736276.689986769,
        //       'z': 4081397.76079101
        //     },
        //     {
        //       'x': 1216335.6036307227,
        //       'y': -4736275.27896252,
        //       'z': 4081400.09093066
        //     },
        //     {
        //       'x': 1216333.441262407,
        //       'y': -4736273.644260507,
        //       'z': 4081402.2270209235
        //     },
        //     {
        //       'x': 1216331.8753504548,
        //       'y': -4736274.3320992915,
        //       'z': 4081406.378010512
        //     },
        //     {
        //       'x': 1216329.5416127034,
        //       'y': -4736272.0301033445,
        //       'z': 4081407.935196639
        //     }
        //   ]
        // })
        console.log(clampedCartesians, '00000000000000000000000000000000000000000000000000000000000000000')
        // 创建点
        for(let i = 0; i < count; ++i) {
          viewer.entities.add({
            position: clampedCartesians[i],
            ellipsoid: {
              radii: new Cesium.Cartesian3(0.2, 0.2, 0.2),
              material: Cesium.Color.RED
            }
          })
        }

        //创建 折线
        viewer.entities.add({
          polyline: {
            positions: clampedCartesians,
            arcType: Cesium.ArcType.NONE,
            width: 2,
            material: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.YELLOW
            }),
            depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.YELLOW
            })
          }
        })
      }

      //挂载完成执行的程序
      onMounted(() => {
        // console.log(viewer.scene.canvas === viewer.canvas) //true
        // console.log(1111111, viewer.canvas)
        // console.log(1111111, viewer.sence)

      })
      //销毁组件
      onBeforeUnmount(() => {
        // vue程序销毁时，需要清理相关资源
        console.log('程序注销')
      })
      return {
        message,
        imgSrc,
        drawLine,
        flyToSpace,
        modeOutline,
        getCoordinate,
        getCameraCoordinates,
        setCameraCoordinates,
        saveCurrentViewAsImages,
        clearCurrentViewAsImages,
        getStraightLines,
        mouseMove,
        mouseMoveModal,
        sunModal,
        testModal,
        registDeviceInfoCallback,
        sampleHeights,
        removeAllLine,
        removeAllEllisoid,
        removeAllPoint,
        measureMent
      }
    },
    // 1.2 资源销毁
    beforeDestroy() {
      // vue程序销毁时，需要清理相关资源
    }
  })
  app.mount('#vueContainer')
</script>
</body>
</html>
